<template>
    <div class="mui-content">
        <form class="mui-input-group">
            <div class="mui-input-row">
                <label>账号</label>
                <input id="account" type="text" class="mui-input-clear mui-input" placeholder="请输入账号" data-input-clear="1" v-model="username"><span class="mui-icon mui-icon-clear mui-hidden"></span>
            </div>
            <div class="mui-input-row">
                <label>密码</label>
                <input id="password" type="password" class="mui-input-clear mui-input" placeholder="请输入密码" data-input-clear="2" v-model="password1"><span class="mui-icon mui-icon-clear mui-hidden"></span>
            </div>
            <div class="mui-input-row">
                <label>确认</label>
                <input id="password_confirm" type="password" class="mui-input-clear mui-input" placeholder="请确认密码" data-input-clear="3" v-model="password2"><span class="mui-icon mui-icon-clear mui-hidden"></span>
            </div>
            <div class="mui-input-row">
                <label>邮箱</label>
                <input id="email" type="email" class="mui-input-clear mui-input" placeholder="请输入邮箱" data-input-clear="4" v-model="email"><span class="mui-icon mui-icon-clear mui-hidden"></span>
            </div>
        </form>
        <div class="mui-content-padded">
            <button id="reg" class="mui-btn mui-btn-block mui-btn-primary" @click="register">注册</button>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                username:'',
                password1:'',
                password2:'',
                email:'',
            }
        },
        methods:{
            register(){
                this.$emit('func',{
                    username:this.username,
                    password1:this.password1,
                    password2:this.password2,
                    email:this.email
                })
            }
        }
    }
</script>

<style scoped>

</style>